<template>
  <div class="energySupply-container">
    <el-card class="box-card">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="text-item"
      >{{item.lable}}：{{item.value}}</div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          lable: "温度",
          value: "a"
        },
        {
          lable: "湿度",
          value: "b"
        },
        {
          lable: "照度",
          value: "c"
        },
        {
          lable: "PM2.5",
          value: "d"
        }
      ]
    };
  }
};
</script>

<style lang="less">
.energySupply-container {
  position: relative;
  width: calc(100vw - 200px);
  height: calc(100vh - 60px);
  background: url("~static/images/1.jpg");
  background-size: 100% 100%;
  .box-card {
    position: absolute;
    width: 600px;
    right: 100px;
    top: calc((100vh - 60px) / 2 - 80px);
    background: rgba(0, 0, 0, .7);
    color: #fff;
  }
  .el-card__header {
    text-align: center;
  }
  .text-item {
    display: inline-block;
    width: 50%;
    padding-left: 20px;
    line-height: 30px;
  }
}
</style>